<script setup lang="ts">
import VDialog from "@/components/VDialog/VDialog.vue";
import { computed, reactive, ref, watch } from "vue";
import { SubmissionPageResponse, batchReviewSubmissionApi } from "@/api/performance/submission";
import { ElMessage, FormInstance, FormRules } from "element-plus";

interface Props {
  modelValue: boolean;
  rows?: SubmissionPageResponse[];
}

const props = defineProps<Props>();
const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
  (e: "success"): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set(v) {
    emits("update:modelValue", v);
  }
});

const formData = reactive({
  approved: true,
  reason: ""
});

const formRef = ref<FormInstance>();

const rules: FormRules = {
  reason: [
    {
      validator: (rule, value, callback) => {
        if (!formData.approved && (!value || value.trim() === "")) {
          callback(new Error("驳回时必须填写理由"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};

const loading = ref(false);

async function handleConfirm() {
  if (!formRef.value) return;
  
  await formRef.value.validate((valid) => {
    if (valid) {
      if (!props.rows || props.rows.length === 0) {
        ElMessage.warning("请选择要审核的数据");
        return;
      }
      
      loading.value = true;
      const idList = props.rows.map(row => row.id);
      const data = {
        idList,
        approved: formData.approved,
        reason: formData.approved ? undefined : formData.reason
      };
      
      batchReviewSubmissionApi(data)
        .then(() => {
          ElMessage.success(formData.approved ? "审核通过成功" : "审核驳回成功");
          visible.value = false;
          emits("success");
        })
        .catch((e) => {
          ElMessage.error((e as Error)?.message || "审核失败");
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}

function handleOpened() {
  formData.approved = true;
  formData.reason = "";
  formRef.value?.clearValidate();
}

watch(() => formData.approved, () => {
  if (formData.approved) {
    formData.reason = "";
    formRef.value?.clearValidate("reason");
  }
});
</script>

<template>
  <v-dialog
    :title="props.rows && props.rows.length > 1 ? '批量审核' : '审核'"
    v-model="visible"
    :loading="loading"
    @confirm="handleConfirm"
    @cancel="visible = false"
    @opened="handleOpened"
  >
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="审核结果" required>
        <el-radio-group v-model="formData.approved">
          <el-radio :label="true">通过</el-radio>
          <el-radio :label="false">驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="审核理由" prop="reason">
        <el-input
          v-model="formData.reason"
          type="textarea"
          :rows="4"
          placeholder="驳回时必须填写理由，通过时可不填"
          :disabled="formData.approved"
        />
      </el-form-item>
      
      <el-alert
        v-if="!formData.approved"
        type="warning"
        :closable="false"
        show-icon
        style="margin-top: 10px;"
      >
        驳回时必须填写理由
      </el-alert>
    </el-form>
  </v-dialog>
</template>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 22px;
}
</style>

